<template>
    <div class="box">
        <el-menu :default-active="activeIndex" background-color="#6474d1" text-color="#fff" active-text-color="#1b8efb"
            class="el-menu-demo" mode="horizontal" :ellipsis="false" @select="handleSelect">
            <el-menu-item index="0">
                <img style="width: 60px" src="../../assets/logo.png" alt="Element logo" />
                <div class="box-header">航空售票系统</div>
            </el-menu-item>
            <div class="flex-grow"></div>
            <el-menu-item v-if="infoStore.$state.info?.role !== 'admin'" index="2-2">我的订单</el-menu-item>
            <el-menu-item v-if="infoStore.$state.info?.role == 'admin'" index="2-3">管理后台</el-menu-item>
            <el-menu-item v-if="infoStore.$state.info?.role !== 'admin'" index="2-4">服务反馈</el-menu-item>
            <el-menu-item index="2-1" v-if="!infoStore.$state.info.username">登录/注册</el-menu-item>
            <el-sub-menu index="2" v-else>
                <template #title>{{ infoStore.$state.info.username }}</template>
                <el-menu-item index="2-1-1">角色:{{ infoStore.$state.info.role == 'admin' ? '管理员' : '用户' }}</el-menu-item>
                <el-menu-item index="2-1-1">手机号:{{ infoStore.$state.info.phone }}</el-menu-item>
                <el-menu-item index="2-1-1">邮箱:{{ infoStore.$state.info.email }}</el-menu-item>
                <el-menu-item index="2-1-1">最后登录时间:{{ infoStore.$state.info.lastLoginTime }}</el-menu-item>
                <el-sub-menu index="2-5">
                    <template #title>退出</template>
                    <el-menu-item index="2-5-1">退出登录</el-menu-item>
                    <el-menu-item index="2-5-2">注销账号</el-menu-item>
                </el-sub-menu>
            </el-sub-menu>
        </el-menu>
        <div v-show="!isOrderDetail" class="box-body">
            <el-carousel :interval="2000" type="card" height="300px">
                <el-carousel-item v-for="item in lunboImgs" :key="item.url">
                    <img :src="item.url" alt="暂无" style="width: 100%;height: 100%;">
                </el-carousel-item>
            </el-carousel>
            <div class="box-body_message">
                <img src="../../assets/commit-img.jpg" alt="">
            </div>
            <div class="box-body_message2">
                <div class="box-body_message2_title">
                    <div style="font-weight:900">航班信息</div>
                    <div>
                        <div class="query-input" style="margin-top: 20px;">
                            <div style="display: flex;align-items: center;">
                                <div>出发地：</div>
                                <el-input style="margin-bottom:10px;width: 400px;" v-model="searchFrom.departureCity"
                                    placeholder="请输入出发地址" />
                            </div>
                            <div style="display: flex;align-items: center;margin-bottom: 10px;">
                                <div>目的地：</div>
                                <el-input style="width: 400px;" v-model="searchFrom.arrivalCity" placeholder="请输入目的地" />
                            </div>
                            <div style="display: flex;align-items: center;margin-bottom: 20px;">
                                <div>出发时间：</div>
                                <el-date-picker v-model="searchFrom.departureTime" format="YYYY-MM-DD HH:mm:ss"
                                    value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="请输入出发时间" />
                            </div>

                            <el-button type="primary" @click="findData()">
                                <el-icon>
                                    <Search />
                                </el-icon>
                                查询
                            </el-button>
                            <el-button type="danger" @click="reset()">
                                <el-icon>
                                    <Refresh />
                                </el-icon>
                                重置
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div style="width: 100%;">
                <el-card>
                    <div>
                        {{ weaherData.province + weaherData.area + weaherData.city + ' ' }} 当前天气指数
                    </div>
                    <div style="display: flex;height: 250px;width: 100%;margin-top: 20px;">
                        <div style="height: 100%;display: flex;width: 100%;">
                            <div class="weather">
                                <div>PM2.5指数： {{ weaherData.data.pm25 }}</div>
                                <div>
                                    <img :src='weaherData.data.Icon' alt="">
                                    时间： {{ weaherData.data.time }}
                                </div>
                                <div>风力： {{ weaherData.data.wind }}</div>
                            </div>
                            <div class="weather">
                                <div>温度： {{ weaherData.data.temp }}</div>
                                <div>
                                    <img :src='weaherData.data.dayIcon' alt="">
                                    白天风力： {{ weaherData.data.dayWind }}
                                </div>
                                <div>白天天气情况： {{ weaherData.data.dayWeather }}</div>
                                <div>白天温度： {{ weaherData.data.dayTemp }}</div>
                            </div>
                            <div class="weather">
                                <div>湿度： {{ weaherData.data.humidity }}</div>
                                <div>
                                    <img :src='weaherData.data.nightIcon' alt="">
                                    夜晚风力： {{ weaherData.data.nightWind }}
                                </div>
                                <div>夜晚天气情况： {{ weaherData.data.nightWeather }}</div>
                                <div>夜晚温度： {{ weaherData.data.nightTemp }}</div>
                            </div>
                        </div>
                    </div>
                </el-card>
                <el-card>
                    <div>
                        <!-- <el-button key="'添加医院'" @click="addHostDialog()" :icon="CirclePlus" type="primary" text bg
                            class="addUser">添加医院</el-button> -->
                    </div>
                    <el-table :data="tableData" stripe style="width: 100%">
                        <el-table-column label="航空信息">
                            <template #default="scope">
                                <div style="font-size:16px;display: flex;flex-direction: column;">
                                    <div>{{ scope.row.airline }}</div>
                                    <div style="color: #888;margin-top: -3px;white-space: nowrap;">{{ scope.row.aircraftType
                                    }}</div>
                                </div>

                            </template>
                        </el-table-column>
                        <el-table-column label="出发时间" width="350px">
                            <template #default="scope">
                                <div style="display: flex; align-items: center">
                                    <el-icon :size="24">
                                        <timer />
                                    </el-icon>
                                    <div style="margin-left: 10px;font-size: 24px;margin-bottom: 5px;">{{
                                        scope.row.departureTime }}</div>
                                </div>
                                <div style="color: #888;margin-top: -3px;white-space: nowrap;">出发城市：{{
                                    scope.row.departureCity }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="到达时间" width="350px">
                            <template #default="scope">
                                <div style="display: flex; align-items: center">
                                    <el-icon :size="24">
                                        <timer />
                                    </el-icon>
                                    <span style="margin-left: 10px;font-size: 24px;margin-bottom: 5px;">{{
                                        scope.row.arrivalTime }}</span>
                                </div>
                                <div style="color: #888;margin-top: -3px;white-space: nowrap;">到达城市：{{ scope.row.arrivalCity
                                }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="价格">
                            <template #default="scope">
                                <div style="display: flex; align-items: center">
                                    <span
                                        style="font-size: 16px;font-family: Arial;margin: -4px 2px 0 0;vertical-align: middle;display: inline-block;">
                                        ¥</span>
                                    <span style="margin-left: 10px;color: #ff8205;font-size: 30px;">{{ scope.row.price
                                    }}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作">
                            <template #default="scope">
                                <el-space wrap v-if="infoStore.$state.info.role !== 'admin'">
                                    <el-button type="primary" size="small" plain
                                        @click="addOrderInfo(scope.row.id)">预定航班</el-button>
                                </el-space>
                                <el-space wrap>
                                    <el-button type="primary" size="small" plain
                                        @click="findEvaluate(scope.row.id)">查看全部评价</el-button>
                                </el-space>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="demo-pagination-block">
                        <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize"
                            :page-sizes="[10, 20, 30, 40]" :background="false" :total="total"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                    </div>
                </el-card>
            </div>
        </div>
        <div v-show="isOrderDetail" class="box-body">
            <div style="color: rgb(120, 120, 122);cursor: pointer;margin-bottom: 10px;" @click="back()"> &lt;
                返回首页</div>
            <el-table :data="flightDetailData" stripe style="width: 100%">
                <el-table-column label="航空信息">
                    <template #default="scope">
                        <div style="font-size:16px;display: flex;flex-direction: column;">
                            <div>{{ scope.row.airline }}</div>
                        </div>
                        <div style="color: #888;margin-top: -3px;white-space: nowrap;">{{
                            scope.row.flightNumber }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="出发时间" width="350px">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <el-icon :size="24">
                                <timer />
                            </el-icon>
                            <div style="margin-left: 10px;font-size: 24px;margin-bottom: 5px;">{{
                                scope.row.departureTime }}</div>
                        </div>
                        <div style="color: #888;margin-top: -3px;white-space: nowrap;">出发城市： {{
                            scope.row.departureCity }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="到达时间" width="350px">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <el-icon :size="24">
                                <timer />
                            </el-icon>
                            <span style="margin-left: 10px;font-size: 24px;margin-bottom: 5px;">{{
                                scope.row.arrivalTime }}</span>
                        </div>
                        <div style="color: #888;margin-top: -3px;white-space: nowrap;">到达城市：{{ scope.row.arrivalCity
                        }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="价格" sortable>
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span
                                style="font-size: 16px;font-family: Arial;margin: -4px 2px 0 0;vertical-align: middle;display: inline-block;">
                                ¥</span>
                            <span style="margin-left: 10px;color: #ff8205;font-size: 30px;">{{ scope.row.price
                            }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="支付状态">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <el-tag v-if="scope.row.paymentStatus == 1" type="warning">待支付</el-tag>
                            <el-tag v-if="scope.row.paymentStatus == 3" type="success">支付成功</el-tag>
                            <el-tag v-if="scope.row.paymentStatus == 2" type="info">取消支付</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template #default="scope">
                        <el-space wrap>
                            <el-button type="primary" size="small" plain
                                @click="findOrderInfo(scope.row.id)">查看订单</el-button>
                            <el-button v-if="scope.row.paymentStatus === 3" type="primary" size="small" plain
                                @click="evaluateHanler(scope.row.id, scope.row.arrivalTime)">去评价</el-button>
                        </el-space>

                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="box-footer">
        </div>
    </div>
    <!-- 查看评价弹框 -->
    <el-dialog v-model="dialogHost" :title="dialogHostTitle">
        <el-table :data="evfaluateArr" stripe style="width: 100%">
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="score" label="分数">
                <template #default="scope">
                    <el-rate v-model="scope.row.score" allow-half :disabled="true" />
                </template>
            </el-table-column>
            <el-table-column prop="comment" label="内容" />
        </el-table>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogHost = false">取消</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 修改个人账号弹框 -->
    <el-dialog v-model="dialogHost1" :title="dialogHostTitle">
        <el-form :model="addHsotForm">
            <el-form-item label="用户名:" :label-width="formLabelWidth" clearable required>
                <el-input v-model="addHsotForm.username" autocomplete="off" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="密码:" :label-width="formLabelWidth" clearable required>
                <el-input v-model="addHsotForm.password" type="password" placeholder="请输入密码" show-password />
            </el-form-item>
            <el-form-item label="手机号:" :label-width="formLabelWidth" clearable required>
                <el-input v-model="addHsotForm.phone" autocomplete="off" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="邮箱:" :label-width="formLabelWidth" clearable required>
                <el-input v-model="addHsotForm.email" autocomplete="off" placeholder="请输入邮箱" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogHost1 = false">取消</el-button>
                <el-button @click="updateSubmit()">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 查看订单弹框 -->
    <el-dialog v-model="dialogHost2" :title="dialogHostTitle">
        <el-descriptions class="margin-top"
            :title="orderDetailData?.paymentStatus == 1 ? '待支付' : orderDetailData?.paymentStatus == 2 ? '取消支付' : '支付成功'"
            :column="3" border>
            <template #extra>
                <div></div>
                <el-button v-if="orderDetailData?.paymentStatus !== 2" @click="canclePayOrderModal" type="danger">
                    取消订单</el-button>
                <el-button v-if="orderDetailData?.paymentStatus == 1" type="primary" @click="payOrderModal">支付订单</el-button>
                <el-button type="primary" @click="removeOrderInfo()">删除订单</el-button>
            </template>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        航班号
                    </div>
                </template>
                {{ orderDetailData?.flightNumber }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        出发时间
                    </div>
                </template>
                {{ orderDetailData?.departureTime }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        到达时间
                    </div>
                </template>
                {{ orderDetailData?.arrivalTime }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        出发城市
                    </div>
                </template>
                {{ orderDetailData?.departureCity }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        到达城市
                    </div>
                </template>
                {{ orderDetailData?.arrivalCity }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        航空公司
                    </div>
                </template>
                {{ orderDetailData?.airline }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        飞机型号
                    </div>
                </template>
                {{ orderDetailData?.aircraftType }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        座位容量
                    </div>
                </template>
                {{ orderDetailData?.seatCapacity }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        价格
                    </div>
                </template>
                {{ orderDetailData?.price }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        支付状态
                    </div>
                </template>
                {{ orderDetailData?.paymentStatus == 1 ? '待支付' : orderDetailData?.paymentStatus == 2 ? '取消支付' : '支付成功' }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        下单时间
                    </div>
                </template>
                {{ orderDetailData?.ordersTime }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        支付时间
                    </div>
                </template>
                {{ orderDetailData?.paymentTime }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        取消时间
                    </div>
                </template>
                {{ orderDetailData?.cancelTime || '无' }}
            </el-descriptions-item>

        </el-descriptions>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogHost2 = false">取消</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 二次确认支付弹窗 -->
    <el-dialog v-model="dialogVisible" title="操作" width="500">
        <span>{{ dialogVisibleContent }}</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="paySubmit()">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 添加服务反馈信息弹框 -->
    <el-dialog v-model="dialogHost6" title="添加服务反馈信息">
        <el-form :model="addHsotForm2">
            <el-form-item label="服务质量:" :label-width="formLabelWidth" clearable required>
                <el-input v-model="addHsotForm2.serviceQuality" autocomplete="off" placeholder="请输入服务质量" />
            </el-form-item>

            <el-form-item label="员工服务态度:" :label-width="formLabelWidth" clearable required>
                <el-input v-model="addHsotForm2.staffServiceAttitude" placeholder="请输入员工服务态度" />
            </el-form-item>
            <el-form-item label="设施和设备:" :label-width="formLabelWidth" clearable required>
                <el-input v-model="addHsotForm2.facilitiesAndEquipment" placeholder="请输入设施和设备" />
            </el-form-item>
            <el-form-item label="总体评价:" :label-width="formLabelWidth" clearable required>
                <el-input v-model="addHsotForm2.overallRating" placeholder="请输入总体评价" />
            </el-form-item>
            <el-form-item label="评论和建议:" :label-width="formLabelWidth" clearable required>
                <el-input v-model="addHsotForm2.commentsAndSuggestions" placeholder="请输入评论和建议" />
            </el-form-item>
            <el-form-item label="联系信息:" :label-width="formLabelWidth" clearable required>
                <el-input v-model="addHsotForm2.contactInformation" placeholder="请输入联系信息" />
            </el-form-item>

        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogHost6 = false">取消</el-button>
                <el-button type="primary" @click="addHostSubmit()">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 评价弹窗 -->
    <el-dialog v-model="dialogVisible1" title="评价该航班" width="500">
        <el-form :model="evaluateForm">
            <el-form-item label="分数:" label-width="100px" clearable required>
                <el-rate v-model="evaluateForm.score" allow-half
                    :texts="['oops', 'disappointed', 'normal', 'good', 'great']" />
            </el-form-item>
            <el-form-item label="评价内容:" label-width="100px" clearable required>
                <el-input v-model="evaluateForm.comment" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
                    placeholder="Please input" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取消</el-button>
                <el-button type="primary" @click="evaluateSubmit()">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { Timer } from '@element-plus/icons-vue';
import lunbo1 from '../../assets/lunbo/lunbo1.png'
import lunbo2 from '../../assets/lunbo/lunbo2.png'
import lunbo3 from '../../assets/lunbo/lunbo3.png'
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search, Refresh } from '@element-plus/icons-vue';
import { Ref, onMounted, reactive, ref, toValue, unref } from 'vue'
import {
    reqFindFlightInfo,
    reqAddOrderInfo,
    reqFindTaiguWeather,
    reqFindMyOrderInfo,
    FindMyOrderInfo,
    FindFlightInfo,
    TaiguWeather,
    FindFlightTableRow,
    reqFindEvFaluate,
    EvfaluateRow,
    reqFindMyOrderDetail,
    FindMyOrderDetail,
    PayOrder,
    reqModifyOrderInfo,
    evaluateType,
    reqCommentOrder,
    reqRemoveOrderInfo,
} from '@/api/AFlight';
import { useRouter } from 'vue-router'
import { deleteCurrentUser, findCurrentUser, loginOutCurrentUser } from '@/api';
import { Info, useStore } from '@/pinna';
import { addAccountParams } from '../userFamily/type';
import { reqUpdateOwnInfo } from '@/api/userFaimily';
import { addFeedback, reqaddFeedback } from '@/api/AFeedback';
const router = useRouter();
const activeIndex = ref('1')
const formLabelWidth = '100px'
// 是否订单详情
let isOrderDetail = ref(false)
let dialogHost2 = ref(false)
let flightDetailData = ref<FindMyOrderInfo[]>([])
let orderDetailData = ref<FindMyOrderDetail>()

const dialogVisible = ref(false)
let dialogVisibleContent = ref('')
let orderParams = ref<PayOrder>({
    id: '',
    flightId: '',
    paymentStatus: true
})
const findOrderInfo = async (id: string) => {
    orderParams.value.id = id
    await reqFindMyOrderDetail({ id }).then((res: any) => {
        const { data, code, msg } = res
        if (code == 200) {
            orderParams.value.flightId = data.flightId
            orderDetailData.value = data
            dialogHostTitle.value = '查看订单详情'
            dialogHost2.value = true
        } else {
            ElMessage({
                message: msg,
                type: 'error'
            })
        }
    })
}
let dialogVisible1 = ref(false)
let dialogHost6 = ref(false)
let evaluateForm = ref<evaluateType>({
    id: '',
    score: 1,
    comment: ''
})
const evaluateHanler = async (id: string, arrivalTime: string) => {
    if (!arrivalTime) return
    console.log(arrivalTime, +new Date(arrivalTime), +new Date())
    if (+new Date() > +new Date(arrivalTime)) {
        dialogVisible1.value = true
        evaluateForm.value.id = id
    } else {
        ElMessage({
            message: '当航程结束后可进行评价',
            type: 'warning'
        })
    }
}
const evaluateSubmit = async () => {
    await reqCommentOrder(unref(evaluateForm)).then((res: any) => {
        const { code, msg } = res
        if (code == 200) {
            ElMessage({
                message: '评价该航班成功',
                type: 'success'
            })
            dialogVisible1.value = false
        } else {
            ElMessage({
                message: msg,
                type: 'error'
            })
        }
    })
}
const addHsotForm2 = ref<addFeedback>({
    "serviceQuality": "",
    "staffServiceAttitude": "",
    "facilitiesAndEquipment": "",
    "overallRating": "",
    "commentsAndSuggestions": "",
    "contactInformation": ""
})

const resetDialogHostFrom2 = () => {
    addHsotForm2.value = {
        "serviceQuality": "",
        "staffServiceAttitude": "",
        "facilitiesAndEquipment": "",
        "overallRating": "",
        "commentsAndSuggestions": "",
        "contactInformation": ""
    }
}
const addHostSubmit = async () => {
    await reqaddFeedback(unref(addHsotForm2)).then((res: any) => {
        const { code } = res

        if (code === 200) {
            dialogHost6.value = false
            ElMessage({
                message: '添加服务反馈信息成功',
                type: 'success'
            })

        } else {
            const message = res.msg || '请求异常'
            ElMessage({
                message: message,
                type: 'warning'
            })
        }
    })
}
const back = () => {
    isOrderDetail.value = false
    findData()
}
const payOrderModal = () => {
    dialogVisibleContent.value = '是否确认支付该订单'
    dialogVisible.value = true

}
const canclePayOrderModal = () => {
    dialogVisibleContent.value = '是否取消支付该订单'
    dialogVisible.value = true
}

const paySubmit = async () => {
    orderParams.value.paymentStatus = dialogVisibleContent.value == '是否确认支付该订单'
    await reqModifyOrderInfo(unref(orderParams)).then((res: any) => {
        const { code, msg } = res
        if (code == 200) {
            dialogVisible.value = false
            dialogHost2.value = false
            ElMessage({
                message: msg,
                type: 'success'
            })
        } else {
            ElMessage({
                message: msg,
                type: 'error'
            })
        }
    })
    await reqFindMyOrderInfo().then((res: any) => {
        const { data, code, msg } = res
        if (code == 200) {
            flightDetailData.value = data
            console.log(flightDetailData)
        } else {
            ElMessage({
                message: msg,
                type: 'error'
            })
        }
    })
}
// 修改个人账号
let dialogHost1 = ref(false)
// 获取是否登录
const isLogin = () => {
    // if (infoStore.info.username) return
    if (localStorage.getItem('isLogin') == 'true') return
    router.push('/login')
}
isLogin()
const handleSelect = async (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
    if (key == '2-1') {
        router.replace({
            name: 'Login',
            query: {
                path: 2
            }
        })
    }
    if (key == '2-2') {
        await reqFindMyOrderInfo().then((res: any) => {
            const { data, code, msg } = res
            if (code == 200) {
                flightDetailData.value = data
                console.log(flightDetailData)
            } else {
                ElMessage({
                    message: msg,
                    type: 'error'
                })
            }
        })
        isOrderDetail.value = true
    }
    if (key == '2-3') {
        router.replace({
            name: 'Home',
            query: {
                path: 1
            }
        })
    }
    if (key == '2-4') {
        resetDialogHostFrom2()
        dialogHost6.value = true
    }
    if (key == '2-5-1') {
        localStorage.setItem('isLogin', 'false')
        infoStore.$reset()
        isLogin()
        await loginOutCurrentUser().then((res: any) => {
            const { code, msg } = res
            if (code == 200) {
                ElMessage({
                    message: msg,
                    type: 'success'
                })
            } else {
                ElMessage({
                    message: msg,
                    type: 'error'
                })
            }
        })
    } else if (key == '2-5-2') {
        ElMessageBox.confirm(
            '是否确认注销?',
            'Warning',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(async () => {
                await deleteCurrentUser({ id: infoStore.$state.info.id }).then((res: any) => {
                    const { code, msg } = res
                    infoStore.changeState(res.data)
                    if (code == 0) {
                        router.push('/login')
                        ElMessage({
                            message: msg,
                            type: 'success'
                        })
                        infoStore.$reset()
                        isLogin()
                    } else {
                        ElMessage({
                            message: msg,
                            type: 'error'
                        })
                    }
                })
            })
    } else if (key == '2-1-1') {
        resetDialogHostFrom()
        dialogHostTitle.value = '修改个人信息'
        dialogHost1.value = true
        await findCurrentUser().then((res: any) => {
            addHsotForm.value = res.data
            addHsotForm.value.role = addHsotForm.value.role == 'admin' ? '0' : '1'
            console.log(addHsotForm, 'add', res.data);
        })
    }
}
const addHsotForm: Ref<addAccountParams> = ref({
    username: "",
    password: "",
    role: "owner",
    phone: "",
    email: ""
})

const resetDialogHostFrom = () => {
    addHsotForm.value = {
        username: "",
        password: "",
        role: "owner",
        phone: "",
        email: ""
    }
}
const updateSubmit = async () => {
    await reqUpdateOwnInfo(unref(addHsotForm)).then((res: any) => {
        if (res.code === 200) {
            dialogHost1.value = false
            findData()
            ElMessage({
                message: '修改个人信息成功',
                type: 'success'
            })
            router.push('/login')

        } else {
            const message = res.msg || '请求异常'
            ElMessage({
                message: message,
                type: 'warning'
            })
        }
    })
}
const removeOrderInfo = async () => {
    await reqRemoveOrderInfo({ id: orderDetailData.value!.id }).then((res: any) => {
        if (res.code === 200) {
            ElMessage({
                message: '删除订单成功',
                type: 'warning'
            })
        } else {
            const message = res.msg || '请求异常'
            ElMessage({
                message: message,
                type: 'warning'
            })
        }
    })
    await reqFindMyOrderInfo().then((res: any) => {
        const { data, code, msg } = res
        if (code == 200) {
            flightDetailData.value = data
            console.log(flightDetailData)
        } else {
            ElMessage({
                message: msg,
                type: 'error'
            })
        }
    })
    dialogHost2.value = false
}
const infoStore = useStore()
// 登录相关操作
const getInfoData = async () => {
    await findCurrentUser().then((res: { data: Info }) => {
        infoStore.changeState(res.data)
    })
}
getInfoData()
// 搜索栏
const pageNo: Ref<number> = ref(1)
const pageSize = ref(10)
const searchFrom: Ref<FindFlightInfo> = ref({
    flightNumber: "",
    departureTime: "",
    arrivalTime: "",
    departureCity: "",
    arrivalCity: "",
    airline: "",
    aircraftType: ""
})

const reset = () => {
    searchFrom.value = {
        flightNumber: "",
        departureTime: "",
        arrivalTime: "",
        departureCity: "",
        arrivalCity: "",
        airline: "",
        aircraftType: ""
    }
    findData()
}
const findData = async () => {
    await reqFindFlightInfo({
        pageNo: toValue(pageNo),
        pageSize: toValue(pageSize),
        ...unref(searchFrom)
    }).then((res: any) => {
        const { code, data, total: tableTotal } = res

        if (code === 200) {
            tableData.value = data
            total.value = tableTotal

        } else {
            ElMessage({
                message: '请求异常',
                type: 'warning'
            })
        }
    })
}
// 获取天气信息
const weaherData = ref<TaiguWeather>({
    "area": "太谷县",
    "code": 140726,
    "province": "山西省",
    "data": {
        "temp": "8.8",
        "dayWind": "<3级",
        "nightWind": "<3级",
        "dayWeather": "晴",
        "nightTemp": "-7",
        "nightIcon": "https://cache.ip138.com/user/image/tianqi/n00.png",
        "dayIcon": "https://cache.ip138.com/user/image/tianqi/d00.png",
        "pm25": "60",
        "nightWeather": "晴",
        "dayTemp": "7",
        "weather": "晴",
        "humidity": "15",
        "time": "2024-02-15 16:30",
        "Icon": "https://cache.ip138.com/user/image/tianqi/d00.png",
        "wind": "西南风3级"
    },
    "city": "晋中市"
})
const findWeather = async () => {
    await reqFindTaiguWeather().then((res: any) => {
        const { code, data } = res
        if (code === 200) {
            weaherData.value = data as TaiguWeather
        } else {
            ElMessage({
                message: '请求异常',
                type: 'warning'
            })
        }
    })
}
// 表格栏
const total: Ref<number> = ref(0)
const tableData: Ref<Partial<FindFlightTableRow[]>> = ref([])
const handleSizeChange = (val: number) => {
    pageSize.value = val
    findData()
}

const handleCurrentChange = (val: number) => {
    pageNo.value = val
    findData()
}
const addOrderInfo = async (flightId: string) => {
    orderParams.value.flightId = flightId
    await reqAddOrderInfo({
        flightId
    }).then((res: any) => {
        const { code, data, msg } = res

        if (code === 200) {
            tableData.value = data
            reqFindMyOrderInfo().then((res: any) => {
                const { data, code, msg } = res
                if (code == 200) {
                    flightDetailData.value = data
                    isOrderDetail.value = true
                    console.log(flightDetailData)
                } else {
                    ElMessage({
                        message: msg,
                        type: 'error'
                    })
                }
            })
            ElMessage({
                message: '预定航班成功',
                type: 'success'
            })
        } else if (msg) {
            ElMessage({
                message: msg,
                type: 'warning'
            })
        } else {
            ElMessage({
                message: '请求异常',
                type: 'warning'
            })
        }
    })

}
let dialogHost = ref(false)
let evfaluateArr = ref<EvfaluateRow[]>([])
const findEvaluate = async (flightId: string) => {
    await reqFindEvFaluate({
        flightId,
        pageNo: 1,
        pageSize: 100
    }).then((res: any) => {
        const { code, data, msg } = res

        if (code === 200) {
            evfaluateArr.value = data as EvfaluateRow[]
            dialogHostTitle.value = '该航班全部评价'
            dialogHost.value = true

        } else if (msg) {
            ElMessage({
                message: msg,
                type: 'warning'
            })
        } else {
            ElMessage({
                message: '请求异常',
                type: 'warning'
            })
        }
    })
}

// 轮播
const lunboImgs = reactive([
    { url: lunbo1 },
    { url: lunbo2 },
    { url: lunbo3 },
])

// 资讯
onMounted(() => {
    findData(),
        findWeather()
})
let dialogHostTitle = ref('')
</script>

<style lang="scss" scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 480px;
    height: 200px;
}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

.flex-grow {
    flex-grow: 1;
}

.zuozhe {
    text-align: center;
    font-size: 14px;
    color: #999;
    padding-bottom: 10px;
    padding-right: 20px;

    .content {
        display: inline-block;
        margin-right: 15px;
    }
}

.messageContent {
    font-size: 16px;
    line-height: 2;
    text-align: justify;
    color: #434343;
    padding-top: 15px;
}

.isHover:hover {
    color: red;
    cursor: pointer;
}


.box {
    width: 100%;
    height: 100vh;
    background-color: rgba(229, 229, 229, 0.6901960784);
    overflow: auto;

    &-header {
        line-height: 60px;
        display: flex;
        align-items: center;
        font-size: 30px;
        font-family: 楷体;
        color: rgb(251, 250, 247);
        font-weight: 1000;
    }

    &-body {
        width: 95%;
        padding: 23px;
        overflow: auto;
        margin: 0 auto;

        &_message {
            width: 100%;
            height: 200px;
            background: #f1f1f1;
            text-align: center;
            margin-top: 20px;

            img {
                width: 100%;
                height: 100%;
                border: none;
                vertical-align: bottom;
            }
        }

        &_message2 {
            width: 100%;
            font-family: '楷体';
            margin: 0 auto;
            font-size: 19px;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: space-around;

            &_title {
                // overflow: auto;
                width: 100%;
                height: 240px;
                background-color: #f1f1f1;
                padding: 30px;

                &_content {
                    display: flex;
                    padding: 8px;
                    margin: 8px;
                    align-items: center;
                    justify-content: space-between;

                    div {
                        margin-left: 7px;
                    }
                }

                &_content:hover {
                    cursor: pointer;
                    color: red;
                    margin-left: 5px;
                }
            }

            &_title2 {
                width: 36%;
                height: 400px;
                display: flex;
                flex-direction: column;
            }
        }
    }

    &-footer {
        // margin-top: 20px;
        // height: 500px;
        margin-bottom: 30px;
    }

    .weather {
        border-radius: 10px;
        margin-left: 10px;
        margin-right: 10px;
        background-color: #f2f3f5;
        padding: 18px;
        width: 31%;
        height: 214px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }
}
</style>
